<script setup>
import {ref} from 'vue'

const logs = ref([
  {id: 1, user: 'admin', module: '公告管理', action: '发布公告', time: '2024-06-01 10:00'},
  {id: 2, user: 'test', module: '用户管理', action: '删除用户', time: '2024-06-02 09:30'}
])
const page = ref(1)
const pageSize = 10
const total = ref(2)

const detailVisible = ref(false)
const detail = ref({})

function viewDetail(row) {
  detail.value = {...row}
  detailVisible.value = true
}
</script>

<template>
  <div class="log-management">
    <h2>操作日志</h2>
    <el-card>
      <el-table :data="logs" border style="width: 100%">
        <el-table-column label="操作人" prop="user" width="120"/>
        <el-table-column label="操作模块" prop="module" width="140"/>
        <el-table-column label="具体操作" min-width="220" prop="action"/>
        <el-table-column label="操作时间" prop="time" width="180"/>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" @click="viewDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="page"
          :page-size="pageSize"
          :total="total"
          background
          class="pagination"
          layout="prev, pager, next"
      />
    </el-card>

    <!-- 日志详情弹窗 -->
    <el-dialog v-model="detailVisible" title="日志详情" width="500px">
      <div>
        <p><b>操作人：</b>{{ detail.user }}</p>
        <p><b>操作模块：</b>{{ detail.module }}</p>
        <p><b>具体操作：</b>{{ detail.action }}</p>
        <p><b>操作时间：</b>{{ detail.time }}</p>
      </div>
      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.log-management {
  padding: 24px;
}

.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-pagination) {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
  padding: 8px 20px;
}

:deep(.el-pagination .el-pager li) {
  border-radius: 4px;
  margin: 0 2px;
  transition: background 0.2s, color 0.2s;
}

:deep(.el-pagination .el-pager li.active) {
  background: linear-gradient(90deg, #409EFF 0%, #66b1ff 100%);
  color: #fff;
  font-weight: bold;
}

:deep(.el-pagination .el-pager li:hover) {
  background: #e6f0ff;
  color: #409EFF;
}
</style>
